<template>
  <div class="listWorksIndexMain">
    <el-carousel v-if="rotationList.length > 0">
      <template v-for="(item, index) in rotationList">
        <el-carousel-item>
          <img :src="item.imgurl">
        </el-carousel-item>
      </template>
    </el-carousel>
    <div class="worksIndexContainer">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
          <Feature :titleName="'发布地址'">
            <slot>
              <el-skeleton :rows="1" animated v-if="skeletonTopType" v-for="item in 2" class="zylMB30"/>
              <div class="worksIndexContainerUrl zylTransition" v-for="(item, index) in guidePageList" @click="jump({worksurl: item.navurl})">{{ item.title }}</div>
            </slot>
          </Feature>
        </el-col>
        <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
          <el-row :gutter="10" id="myPhotoWork">
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="skeletonListType" v-for="item in 6">
              <el-skeleton animated class="zylMB30">
                <template #template>
                  <el-skeleton-item variant="image" style="width: 100%; height: 200px" />
                  <div class="zylSkeletonText">
                    <el-skeleton-item variant="p" class="skeletonMb10"/>
                    <el-skeleton-item variant="p" class="skeletonMb10"/>
                    <el-skeleton-item variant="p" class="skeletonMb10"/>
                  </div>
                </template>
              </el-skeleton>
            </el-col>
            <template v-for="(item, index) in worksList">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <div class="worksIndexFeature">
                  <div class="worksIndexFeatureTextMain">
                    <div class="worksIndexFeatureText zylTransition" @click="jump(item)">
                      <div class="featureTextTitle zylSpace">{{ item.title }}</div>
                      <div>{{ item.creationtime }}</div>
                    </div>
                    <img :src="item.imgurl" @click="onImageFn(item, index)">
                  </div>
                </div>
              </el-col>
            </template>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <div class="zylPaginationMain zylMB10">
                <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- 图片查看器 -->
    <ElImageViewer
            :isImageData="isImageData"
            :isImageList="rightImgList"
            v-if="showElImageViewer"
            @onImageViewerCallback="onImageViewerCallback" />
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 作品分享
  name: 'worksIndex',
  components: {
    Feature
  },
  data () {
    return {
      rotationList: [],
      worksList: [],
      guidePageList: [],
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 9,
      },
      skeletonTopType: true,
      skeletonListType: true,
      // 图片查看器
      showElImageViewer: false,
      isImageData: {
        imageUrl: '',
        imageTitle: '',
        imageIndex: 0,
      },
      rightImgList: [],
    };
  },
  mounted () {
    this.getRotationStateImgtype();
    this.getZylworksState();
    this.getNavigationStateNavtype();
  },
  methods: {
    // 轮播图
    getRotationStateImgtype () {
      let params = {
        state: '是',
        imgtype: '作品展示',
      };
      Interface.getRotationStateImgtype(params).then(res => {
        if (res.status === 200) {
          this.rotationList = res.data;
        };
      })
    },

    // 作品列表
    getZylworksState () {
      let params = {
        state: '是',
        pageNum: this.pagList.pageNum,
        pageSize: 9
      };
      Interface.getZylworksState(params).then(res => {
        if (res.status === 200) {
          this.skeletonListType = false
          this.worksList = res.data.list
          this.pagList.total = res.data.total
          this.worksList.map(item => {
            this.rightImgList.push(
                {
                  id: item.id,
                  title: item.title,
                  isUrl: item.imgurl,
                }
            )
          })
        }
      })
    },

    // 发布地址
    getNavigationStateNavtype () {
      let params = {
        state: '是',
        navtype: '三级栏目',
      };
      Interface.getNavigationStateNavtype(params).then(res => {
        if (res.status === 200) {
          this.skeletonTopType = false;
          this.guidePageList = res.data;
        }
      })
    },

    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getZylworksState();
    },

    // 跳转
    jump (item) {
      window.open(item.worksurl, '_blank');
    },

    // 点击图片
    onImageFn (item, index) {
      this.isImageData.imageUrl = item.imgurl
      this.isImageData.imageTitle = item.title
      this.isImageData.imageIndex = index
      this.showElImageViewer = true
    },

    // 图片查看器回调
    onImageViewerCallback (item) {
      switch (item.type) {
        case 'close':
          this.showElImageViewer = false
          break
        case 'download':
          alert('下载')
          break
      }
    }
  },
}
</script>
